<template>
  <div class="home">
    <div style="width:20vw" ref="right"  class="right"></div>
    <div style="width:auto;padding-left:2vw;" ref="left" class="left">
      <div class="left-head"><h1>系统首页</h1></div>
      <div class="left-mid">
        <!-- 中间的左边 -->
        <div class="midLeft">
          <div class="mL1">
            <div class="mL_top">
            <div><img src="https://avatar-static.segmentfault.com/406/594/406594657-6073b0ac7c433_huge256" alt=""></div>
            <div class="adminText">
              <div>admin</div>
              <div>超级管理员</div>
            </div>
          </div>
          <div class="mL_bot">
            <div class="loginTime"><span>上次登录时间:</span><span>{{time}}</span></div>
            <div class="loginAddress"><span>上次登录地点:</span><span>{{address}}</span></div>
            <el-button v-show="address==null" @click.native="getLocal" type="primary">获取ip地址</el-button>
          </div>
          </div>
          <div class="mL2">
            <div class="mLhead">开发语言构成</div>
            <div id="mLmain" class="mLmain">

            </div>
          </div>
        </div>
        <!-- 中间的右边 -->
        <div class="midRight">
          <div class="mR1">
            <div class="mR1_item">
              <div class="iconfont icon-fw" style="background-color:#2d8cf0;width:45%;color:#fff;font-size:1rem;line-height:3rem;text-align:center;">&#xe666;</div>
              <div style="width:55%;">
                <div style="color:#2d8cf0;text-align:center;margin-top:10px;font-size:0.8rem;font-weight:700;">{{visits}}</div>
                <div style="text-align:center;color:#888888;font-size:0.5rem;margin-top:10px;">用户访问</div> 
              </div>
            </div>
            <div class="mR1_item">
              <div class="iconfont icon-gonggao" style="background-color:#64d572;width:45%;color:#fff;font-size:1rem;line-height:3rem;text-align:center;">&#xe94f;</div>
              <div style="width:55%;">
                <div style="color:#64d572;text-align:center;width:100%;margin-top:10px;font-size:0.8rem;font-weight:700;">{{notices}}</div>
                <div style="text-align:center;color:#888888;font-size:0.5rem;margin-top:10px;">系统公告</div>
              </div>
            </div>
            <div class="mR1_item">
              <div class="iconfont icon-yhjy" style="background-color:#f25e43;width:45%;color:#fff;font-size:1rem;line-height:3rem;text-align:center;">&#xe613;</div>
              <div style="width:55%;">
                <div style="color:#f25e43;text-align:center;margin-top:10px;font-size:0.8rem;font-weight:700;">{{feedbacks}}</div>
                <div style="text-align:center;color:#888888;font-size:0.5rem;margin-top:10px;">用户反馈</div>
              </div>
            </div>
          </div>
          <div class="mR2">
            <ToDoList></ToDoList>
          </div>
        </div>
      </div>
      <div class="left-bot">
        <div id="lBL" class="lBL"></div>
        <div id="lBR" class="lBR"></div>
      </div>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { mapState,mapMutations } from "vuex";
import {setCookie, getCookie,delCookie } from "util/myCookie";
import {getTopPartNums,getArticleLine} from "network/home"
import {total} from "network/user_manage"
// 引入组件todolist
import ToDoList from "components/todoList/todolist"
import axios from 'axios'
export default {
  name: "Home",
  components :{
    ToDoList
  },
  data() {
    return {
      time:unescape(getCookie('time')),//登录时间
      address:unescape(getCookie('address'))==undefined ? null : unescape(getCookie('address')) ,//登录地点
      chartPie: null,//开发语言饼状图
      visits:100,//用户访问量
      notices:100,//系统公告
      feedbacks:100,//用户反馈
      articleArrNum:[],//文章条状图的各个条的数目
      totalStudents:0,//学生数目
      totalTeachers:0,//老师总数目
    }
  },
  watch: {
    lateralNavanimate(newValue, oldValue) {
    this.$refs.right.style.width = newValue+'vw';
    },
    padding_left(newV,oldV){
      this.$refs.left.style.paddingLeft = newV+'vw';
      if(newV==2){
         this.$refs.left.style.paddingLeft = '7vw'
      }

      console.log("newV:",newV)
    }
  },
  computed: {
    ...mapState({
      lateralNavanimate: (state) => state.lateralNavanimate,
      padding_left: (state) => state.padding_left,
      isLogin: (state) => state.isLogin
    }),
  },
  methods: {
   ...mapMutations(['changenavIndex']),
  // 生成饼状图
   drawPieChart() {
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
        var echarts = require('echarts');
        this.chartPie = echarts.init(document.getElementById('mLmain'),'macarons');
        this.chartPie.setOption({
          title: {
            text: 'Pie Chart',
            subtext: '语言比例',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: ['Vue', 'HTML', 'JS', 'CSS', 'MongoDB'],
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: '构成比例',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              data: [
                {value: 1548, name: 'Vue'},
                {value: 310, name: 'HTML'},
                {value: 234, name: 'JS'},
                {value: 135, name: 'CSS'},
                {value: 335, name: 'MongoDB'}
              ],
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
        });
   },
  //  生成文章条状图
  drawLinearticle(){
    let that = this;
    // 基于准备好的dom，初始化echarts实例
    var echarts = require('echarts');
        var myChart = echarts.init(document.getElementById('lBL'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '教育资源条状图'
            },
            tooltip: {},
            legend: {
                data:['文章数量']
            },
            xAxis: {
                data: ["实时资讯","政策资讯","课程资讯","百科常识","试题资讯","学校资讯"]
            },
            yAxis: {},
            series: [{
                name: '文章数量',
                type: 'bar',
                data: that.articleArrNum
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  },
  //  生成用户条状图
  drawLineuser(){
    let that = this;
    // 基于准备好的dom，初始化echarts实例
    var echarts = require('echarts');
        var myChart = echarts.init(document.getElementById('lBR'));
        var color = ["#2d8cf0","#64d572","#f25e43"]
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '系统现有用户柱状图'
            },
            tooltip: {},
            legend: {
                data:['用户数量']
            },
            xAxis: {
                data: ["学生用户","老师用户","管理员用户"]
            },
            yAxis: {},
            series: [{
                name: '用户数量',
                type: 'bar',
                data: [that.totalStudents, that.totalTeachers, 10],
            
            itemStyle:{
            color:function(p){
                return color[p.dataIndex]
            }
          }
        }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
  },
  getLocal(that,myip){
     let d_p = process.env.NODE_ENV == 'development' ? '开发环境' : '生产环境'
     console.log("当前是:",d_p)
     if(d_p=='生产环境'){
       console.log("用户ip:",myip)
        axios.get('/api_location',{params:{ip:myip,key:"7155e1de441a6ebb1edeb932f148a59f"}}).then(res=>{
          console.log("res:",res.data.result);
          let address = res.data.result.Province+' '+res.data.result.City;
          console.log("登录地址：",address);
          setCookie('address',address,10)
          that.address = unescape(getCookie('address'))
          return address;//返回地址
        })
     }else{
      axios.get('/api_ip').then(response=>{
       console.log("ip:",response.data)
       let reg = /((25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)/gm 
       let str = response.data
       let ip = str.match(reg)
       console.log("用户ip:",ip)
        axios.get('/api_location',{params:{ip:ip[0],key:"7155e1de441a6ebb1edeb932f148a59f"}}).then(res=>{
          console.log("res:",res.data.result);
          let address = res.data.result.Province+' '+res.data.result.City;
          console.log("登录地址：",address);
          setCookie('address',address,10)
          that.address = unescape(getCookie('address'))
          return address;//返回地址
        })
     })
     }
  },
},
  mounted() {
    let d_p = process.env.NODE_ENV == 'development' ? '开发环境' : '生产环境'
    console.log("当前是:",d_p)
    let that = this;
    // this.$refs.left.style.paddingLeft = this.padding_left+'vw'
    // this.changenavIndex(1);
    getTopPartNums("visit").then(res=>{
      console.log("visit:",res);
      if(getCookie('address')==undefined){
        that.getLocal(that,res.ip)
        console.log("666")
      }
      this.visits = res.count
    })
     getTopPartNums("notice").then(res=>{
      console.log("notice:",res)
      this.notices = res.count
    })
     getTopPartNums("feedback").then(res=>{
      console.log("feedback:",res)
      this.feedbacks = res.count
    })
    getArticleLine().then(res=>{
      console.log("文章数组数量：",res)
      that.articleArrNum = res.articleCountArr
      that.drawLinearticle();
      console.log(that.articleArrNum)
    })
    total("Students").then(res=>{
      console.log("学生数目总量：",res)
      that.totalStudents = res.count
    })
    total("Teachers").then(res=>{
      console.log("老师数目总量：",res)
      that.totalTeachers = res.count
      setTimeout(() => {
        that.drawLineuser();
      }, 500);
    })
  },
  activated() {
    this.$nextTick(() => {
        this.drawPieChart();
      })
    // this.getLocal();//获取用户地理位置
    if(this.isLogin==true){
      let that = this
      location.reload()
    }
    this.$eventBus.$on("userLogin",function(msg){
     console.log("登录")
     console.log(msg)
    //  setTimeout(() => {
       location.reload()
    //  }, 200);
   })
    this.$refs.left.style.paddingLeft = this.padding_left+'vw'
    if(this.padding_left==2){
    this.$refs.right.style.width = (22-this.padding_left)+'vw'
    }
    this.changenavIndex(1);
  },

}
</script>
<style lang="less">
.home {
  display: flex;
  width: 100vw;
  height: 90vh;
  overflow: hidden;
  overflow-y:scroll ;
  .left{
    background-color: #f0f0f0;
    flex: 1;
    .left-head{
      z-index: 2;
      width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      height: 1.5rem;
      h1{
        width: 100%;
        text-align: center;
        display: inline-block;
        font-size: 0.8rem;
        line-height: 1.5rem;
        color: #505050;
        background-color: #f0f0f0;
        position: fixed;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      }
    }
    .left-mid{
      background-color: #f0f0f0;
      margin-top: 2vh;
      display: flex;
      justify-content: space-between;
      padding-bottom:2vh ;
      .midLeft{
        box-sizing: border-box;
        background-color: #f0f0f0;
        width: 32%;
        margin-left: 1%;
        margin-right: 1%;
        height: 18rem;
        .mL1{
          background-color: #fff;
          padding-bottom: 3%;
          border-radius: 5px;
            .mL_top{
          background-color: #fff;
          width: 80%;
          margin: 0 auto;
          box-sizing: border-box;
          padding-top: 5%;
          padding-bottom: 3%;
          // padding-right: 5%;
          // padding-left: 5%;
          display: flex;
          justify-content: space-between;
          border-bottom: solid #999999 2px;
          div{
            img{
              width: 4rem;
              height: 4rem;
              border-radius: 50%;
            }
          }
          .adminText{
            padding-top: 15%;
            padding-right: 10%;
            div{
              text-align: center;
            }
            div:nth-child(2){
              font-size: 0.5rem;
              color: #888888;
            }
          }
        }
        .mL_bot{
          background-color: #fff;
          width: 80%;
          margin: 0 auto;
          font-size: 0.4rem;
          color: #888888;
          .loginTime,.loginAddress{
            margin-top: 10px;
            display: flex;
            // justify-content: space-between;
            span:nth-child(2){
              margin-left: 30px;
            }
          }
        }
        }
        .mL2{
          border-radius: 5px;
          margin-top: 1rem;
          background-color: #fff;
          .mLhead{
            padding-top: 1vh;
            padding-bottom: 1vh;
            height: 1.5rem;
            padding-left: 0.5rem;
            font-size: 0.5rem;
            line-height: 1rem;
            border-bottom: solid 1px #8888;
          }
          .mLmain{
            height: 9rem;
            padding-left: 1%;
            padding-right: 1%;
            width: 98%;
            padding-bottom: 1vh;
          }
        }
      }
      .midRight{
        box-sizing: border-box;
        background-color: #f0f0f0;
        width: 64%;
        margin-left: 1%;
        margin-right: 1%;
        .mR1{
          display: flex;
          justify-content: space-between;
          .mR1_item{
            border-radius: 5px;
            display: flex;
            width: 31%;
            height: 3rem;
            background-color: #fff;
          }
          .mR1_item:hover{
            box-shadow: 5px 5px 15px 0px rgba(30, 30, 30, 0.3),-5px -5px 15px 0px rgba(30, 30, 30, 0.3);
          }
        }
        .mR2{
          overflow: hidden;
          overflow-y:scroll ;
          margin-top: 2.8vh;
          height: 15rem;
          background-color: #fff;
        }
      }
    }
    .left-bot{
      margin-top: 3vh;
      display: flex;
      justify-content: space-between;
      padding-bottom: 2vh;
      .lBL{
        padding-top: 2vh;
        border-radius: 5px;
        margin-left: 2vh;
        width: 48%;
        height: 10rem;
        background-color: #fff;
      }
      .lBR{
        padding-top: 2vh;
        border-radius: 5px;
        margin-right: 2vh;
        width: 48%;
        height: 10rem;
        background-color: #fff;
      }
      .lBL:hover,.lBR:hover{
        box-shadow: 1px 1px 15px 0px rgba(30, 30, 30, 0.1),-1px -1px 15px 0px rgba(30, 30, 30, 0.1);
      }
    }
  }
}
 .mR2::-webkit-scrollbar,
 .home::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .mR2::-webkit-scrollbar-thumb,
  .home::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
  .mR2::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .mR2::-webkit-scrollbar-track,
  .home::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
  }
</style>
